<template>
<view class="list-root">
	<!-- #ifdef APP-NVUE -->
	<list class="list" :bounce="false" :render-reverse="true">
		<slot></slot>
		<!-- #ifdef APP-NVUE -->
		<!-- 解决APP端的滚动锚定问题，在最后一个cell 设置 keep-scroll-position 和 render-reverse-position -->
		<cell :keep-scroll-position="true" :render-reverse-position="true"  ref="uni-im-list-last-item">
			<!-- 高度为0的 最后一个元素用于方便滚动到最后一个元素 -->
		</cell>
		<!-- #endif -->
	</list>
	<view :style="{height:paddingBottom}"></view>
	<!-- #endif -->
	
	<!-- #ifndef APP-NVUE -->
	<!-- fast-deceleration	滑动减速速率控制,enable-passive 开启 passive 特性，能优化一定的滚动性能	-->
		<scroll-view :scroll-top="scrollTop" :scroll-into-view="scrollIntoView"
			:enhanced="true" :bounces="false" :enable-passive="false" :fast-deceleration="false"
			class="scroll-view" :scroll-anchoring="true" :scroll-y="scrollY" :scroll-with-animation="false"
			:style="{paddingBottom}" :enable-flex="true"
			@dragstart="dragstart" @dragend="dragend"
			@scroll="onScroll"
			@scrolltolower="onScrollToLower"
		>
			<slot></slot>
			<view id="uni-im-list-last-item" key="uni-im-list-last-item">
				<!-- 高度为0的 最后一个元素用于方便滚动到最后一个元素 -->
			</view>
		</scroll-view>

		<view class="scroll-view fake-scroll-view">
			<slot name="floating-block"></slot>
		</view>
	<!-- #endif -->
</view>
</template>

<script>
/**
 * uni-im-list 组件，渲染一个列表。
 * 
 * @module
 */
	export default {
		data() {
			return {}
		},
		props: {
			scrollY: {
				default: true
			},
			scrollTop: {
				default: 0
			},
			scrollIntoView: {
				type: String,
				default: ''
			},
			paddingBottom: {
				default: 0
			}
		},
		methods: {
			onScroll(e) {
				this.$emit('scroll', e)
			},
			onScrollToLower(e) {
				this.$emit('scrolltolower', e)
			},
			dragstart(e) {
				// console.log('dragstart');
				this.$emit('dragstart', e)
			},
			dragend(e) {
				this.$emit('dragend', e)
			},
		},
		mounted() {
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	.scroll-view{
		overflow-anchor: auto !important;

		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */
		
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		
	}
	/* #endif */
	
	/* #ifdef APP-NVUE */
	.list-root,.list{
		flex: 1;
	}
	/* #endif */

	.fake-scroll-view {
		position: absolute;
		top:0;
		left:0;
		right:0;
		background-color: transparent;
		/* #ifdef H5 || MP */
    pointer-events: none;
		/* #endif */
		color: #576b95;
	}
	.fake-scroll-view:hover {
		color: #7c8cae;
	}
</style>
